<template>
  <div class="model-container">

    <div class="listName">场馆管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="10" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">职工：</el-col>
                <el-col :xl="17" :lg="15" :md="16" :sm="16">
                  <el-form-item prop="realName">
                    <el-input v-model="seacherParam.realName" size="small" placeholder="职工姓名"/>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :xl="5" :lg="10" :md="8" :sm="8">
                <el-col :xl="7" :lg="5" :md="8" :sm="8" class="input-name">所属门店：</el-col>
                <el-col :xl="17" :lg="15" :md="16" :sm="16">

                  <el-select v-model="seacherParam.shopName" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"/>

                  </el-select>

                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(0)">删除</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据"
                  @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="venueName" label="场馆名称"/>

          <el-table-column align="center" prop="venueSite" label="场馆地址"/>
          <el-table-column align="center" prop="venuePic" label="场馆背景图片"/>

          <el-table-column align="center" prop="venuePhone" label="场馆联系电话"/>

          <el-table-column align="center" prop="longitude" label="经度"/>

          <el-table-column align="center" prop="dimension" label="维度"/>

          <el-table-column align="center" label="是否被推荐">
            <template slot-scope="scope">{{ scope.row.isRecommend === 1 ? '已推荐' : '未推荐' }}</template>
          </el-table-column>

          <el-table-column align="center" label="场馆公告">
            <template slot-scope="scope">{{ scope.row.venueNotice === null ? '暂无' : scope.row.venueNotice }}</template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon"
                         @click="edit(scope.row)"/>

              <el-button title="删除" type="warning" circle icon="el-icon-delete" class="table-icon"
                         @click="del(scope.row)"/>
              <el-button v-if="scope.row.isRecommend === 0" title="推荐" type="primary" circle class="table-icon"
                         @click="audit(scope.row)"><i class="iconfont icon-feiji"/></el-button>


            </template>
          </el-table-column>

        </el-table>


        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>


    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="30%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon
               class="demo-ruleForm">
        <div class="formBody">

          <el-form-item label="场馆名称" prop="venueName">
            <el-input v-model="dialogBindData.venueName" size="small" type="text" placeholder="场馆名称"/>
          </el-form-item>
          <el-form-item label="场馆地址" prop="venueSite">
            <el-input v-model="dialogBindData.venueSite" size="small" type="text" placeholder="场馆地址"/>
          </el-form-item>
          <el-form-item label="场馆背景图片" prop="venuePic">
            <el-input v-model="dialogBindData.venuePic" size="small" type="text" placeholder="场馆背景图片"/>
          </el-form-item>
          <el-form-item label="场馆联系电话" prop="venuePhone">
            <el-input v-model="dialogBindData.venuePhone" size="small" type="text" placeholder="场馆联系电话"/>
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="dialogBindData.longitude" size="small" type="text" placeholder="经度"/>
          </el-form-item>
          <el-form-item label="维度" prop="dimension">
            <el-input v-model="dialogBindData.dimension" size="small" type="text" placeholder="维度"/>
          </el-form-item>
          <el-form-item label="场馆公告" prop="venueNotice">
            <el-input v-model="dialogBindData.venueNotice" size="small" type="text" placeholder="场馆公告"/>
          </el-form-item>

          <el-form-item label="活动性质" prop="seIds">
            <el-checkbox-group v-model="dialogBindData.seIds">
              <el-checkbox v-for="date in sportEventsList" :label="date.seId" :key="date.seId">{{date.seName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="账户是否可用" prop="isDelete">
            <el-radio-group v-model="dialogBindData.isDelete">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as system from '../../api/venue'
import {isvalidNull, validatePhone} from '../../utils/validate'
import * as banner from "../../api/banner";

export default {
  data() {
    const merchantsPhone = (rule, value, callback) => {
      if (!isvalidNull(value)) {
        callback(new Error('请输入手机号码'))
      } else if (!validatePhone(value)) {
        callback(new Error('请输入正确手机号码'))
      } else {
        callback()
      }
    }

    return {
      sportEventsList: [],
      // 页面搜索
      seacherParam: {
        realName: ''
      },
      direction: 'ttb',
      shopName: '',
      shopId: '',
      roleNames: '',
      shopNames: '',
      searchShow: false,
      enterpriseName: '',
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      dialogState1: false,
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null,
      datavalID: [],
      typeStatus: [{id: 0, name: '全部'}, {id: 1, name: '可用'}, {id: 2, name: '不可用'}],
      typeStatusvalue: 0,
      // 角色列表
      roleList: null,
      /* 门店下拉选项*/
      options: null,
      // 提交内容
      dialogBindData: {
        venueId: '',
        venueName: '',
        venueSite: '',
        venuePic: '',
        venuePhone: '',
        longitude:'',
        dimension:'',
        venueNotice: '',
        seIds: [],
        isDelete:1
      },
      rules: {
        venueName: [
          {required: true, message: 'venueName不能为空', trigger: 'blur'}
        ],
        venueSite: [
          {required: true, message: 'venueSite不能为空', trigger: 'blur'}
        ], venuePic: [
          {required: true, message: 'venuePic不能为空', trigger: 'blur'}
        ],
        venuePhone: [
          {required: true, validator: merchantsPhone, trigger: 'blur'}
        ],
        longitude: [
          {required: true, message: 'venueName不能为空', trigger: 'blur'}
        ],
        dimension: [
          {required: true, message: 'venueName不能为空', trigger: 'blur'}
        ],
        venueNotice: [
          {required: true, message: 'venueName不能为空', trigger: 'blur'}
        ],
      },

    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增系统用户'
      }
      if (this.dialogType === 2) {
        return '编辑系统用户'
      }
      if (this.dialogType === 4) {
        return '查看所属门店'
      } else {
        return '查看'
      }
    }
  },
  beforeMount() {
    this.getList()
    this.selectOneById()
    this.getAllSportEvents()
  },
  methods: {

    seachFun() {
      const param = {
        current: 1,
        size: this.pageSize,
        /*userName: this.seacherParam.userName,*/
        shopName: this.seacherParam.shopName,
        realName: this.seacherParam.realName
      }
      system.searchUserList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records

        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      system.getUserList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records

        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })

    },
    // 新增
    add() {
      this.dialogType = 1
      this.dialogState = true
      this.getRoleList()
    },
    // 销售人员所属门店
    getShopNames(data) {
      const param = {
        userId: data.userId
      }
      system.searchShopNameByUserId(param).then(res => {
        this.dialogType = 4
        this.dialogState1 = true
        debugger
        // 初始话表格数据
        this.shopNames = res.data.data
        console.log(this.shopNames)

      })
    },
    // 编辑
    edit(data) {
      this.dialogType = 2
      this.dialogState = true
      this.dialogBindData.userId = data.userId
      this.getRoleList()
      this.reBindData(data)
      this.dialogBindData.confirmPwd = data.password
    },
    // 提交
    submmitFun() {
      // console.log("-------------------")
      // console.log("-------------------" + this.dialogBindData)
      // const param = {
      //   venueName: this.dialogBindData.venueName,
      //   venueSite: this.dialogBindData.venueSite,
      //   venuePic: this.dialogBindData.venuePic,
      //   venuePhone: this.dialogBindData.venuePhone,
      //   longitude:this.dialogBindData.longitude,
      //   dimension:this.dialogBindData.dimension,
      //   venueNotice: this.dialogBindData.venueNotice,
      //   sportEvents: this.dialogBindData.sportEvents,
      //   isDelete: this.dialogBindData.isDelete,
      // }

      this.$refs.dialogBindData.validate((valid) => {
        console.log(this.dialogBindData);
        system.addVenueList(this.dialogBindData).then(res => {
          if (res.data.code !== 1) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.buttonState = false
            return false
          }
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.buttonState = false
          this.getList()
          this.handleClose()
        })
      })
    },
    // 删除
    changeFun(data) {
      this.datavalID = data
    },
    del(data) {
      if (this.datavalID.length === 0 && data === 0) {
        this.$message({
          type: 'warning',
          message: '请选需要删除的菜单'
        })
        return false
      }
      this.$confirm('确定要删菜单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delList(data)
      })
    },
    delList(data) {
      const classID = []
      if (data === 0) {
        for (const val of this.datavalID) {
          classID.push(val.venueId)
        }
      } else {
        classID.push(data.venueId)
      }
      console.log(classID);
      system.delUserList(classID).then(res => {
        if (res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
          this.dialogState = false
        }
      })
    },
    // 推荐
    audit(data) {
      this.$confirm('是否推荐?', '提示', {
        confirmButtonText: '推荐',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.censorStatusFun(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    censorStatusFun(data) {
      const param = {
        venueId: data.venueId,
      }
      system.editorVenueList(param).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getList(data.type)
        }
      })
    },
    // 角色列表
    getRoleList(data) {
      const param = {
        current: 1,
        size: 3000
      }
      system.getRoleList(param).then(res => {
        this.roleList = res.data.data.records
      })
    },
    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.seacherParam.shopName = null
      this.pageNo = 1
      this.pageSize = 10
      this.getList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'isAvailable') {
          this.dialogBindData[key] = 1
        } else if (key === 'loginLockStatus') {
          this.dialogBindData[key] = 0
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.dialogState = false
      this.dialogState1 = false
      this.$refs.dialogBindData.clearValidate()
    },
    // 实体店下拉框
    selectOneById() {
      system.selectOneById().then(res => {
        this.options = res.data.data

      })
    },
    //初始化 运动项目
    getAllSportEvents() {
      system.getAllSportEvents().then(res => {
        this.sportEventsList = res.data.data;
      })
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
.grade_type > .el-form-item__content {
  width: 60%;
  height: auto;
}
</style>
